<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>公司认证</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.dtpicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css"/>
    <style>
        body {
            background: #f3f3f3;
            font-size: 14px;
        }

        input[type="text"] {
            margin-bottom: 0;
            border: none;
            padding-top: 1px;
        }

        .aui-list-view-cell {
            vertical-align: middle;
            padding: 0px 15px;
        }

        .aui-list-view {
            margin-bottom: 0;
        }

        .aui-arrow-right:after {
            content: "";
        }

        .rzTitle {
            width: 20%;
            float: left;
            vertical-align: middle;
            height: 45px;
            line-height: 45px;
        }

        .rzInput {
            width: 80%;
            float: left;
            height: 45px;
            line-height: 45px;
        }

        .RegMeg {
            padding: 8px 15px;
            font-size: 13px;
        }

        .btn {
            border: none;
            background: #ccc;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin-top: 18px;
        }

        .time {
            width: 100%;
            height: 45px;
            padding-left: 15px;
            color: #9c9c9c;
            font-size: 14px;
        }

        input {
            font-size: 14px;
        }

        .picGroup {
            text-align: center;
            background: #f5f5f5;
            padding: 5px;
            width: 32%;
            /*float: left;*/
            display: table;
            height: 120px;
            margin-bottom: 10px;
        }

        .picGroupCell {
            /*display: table-cell;*/
            vertical-align: middle;
            margin-top: 15px;

        }

        .picGroupCell > img {
            width: 240px;
        }

        .pic {
            max-height: 145px;
            overflow: hidden;
            padding-bottom: 0;
            padding: 12px 15px;
        }

        .liInfoPIc.pic {
            max-height: 270px;
            overflow: hidden;
            padding-bottom: 0;
        }

        .picList li {
            max-height: 140px;
            /* overflow: hidden; */
            width: 32%;
            margin-right: 2%;
            float: left;
            margin-bottom: 28px;
            position: relative;

        }

        .picList li img {
            width: 100%;
            max-height: 120px;
        }

        .picList li:nth-of-type(3n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div class="contain">
    <!--<ul class="aui-list-view">-->
    <!--<li class="aui-list-view-cell">-->
    <!--<div class="aui-arrow-right rzTitle">身份认证</div>-->
    <!--<div class="aui-arrow-right rzInput"><input title="正确身份证" type="text" class="validate"   placeholder="请输入您的身份证号码" id="idCard" oninput="checkID(this)" onpropertychange="checkID(this)"></div>-->
    <!--</li>-->
    <!--</ul>-->
    <div class="RegMeg">工商注册信息</div>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right rzTitle">公司名称</div>
            <div class="aui-arrow-right rzInput"><input type="text" class="validate" placeholder="请输入公司名称"
                                                        id="companyName" oninput="checkNull(this)"
                                                        onpropertychange="checkNull(this)"></div>
        </li>


        <!--<li class="aui-list-view-cell">-->
        <!--<div class="aui-arrow-right rzTitle">经营地址</div>-->
        <!--<div class="aui-arrow-right rzInput"><input type="text" placeholder="请输入经营地址" id="address" class="validate"-->
        <!--oninput="checkNull(this)" onpropertychange="checkNull(this)">-->
        <!--</div>-->
        <!--</li>-->
        <li class="aui-list-view-cell">
        <div class="aui-arrow-right rzTitle">成立日期</div>
        <div class="aui-arrow-right rzInput">
        <!--用div防止弹出输入框 <input type="text" placeholder="请输入成立日期" id="startTime"> -->
        <div class="time validate" id="startTime">请输入成立日期</div>
        </div>
        </li>
        <!--<li class="aui-list-view-cell">-->
        <!--<div class="aui-arrow-right rzTitle">经营范围</div>-->
        <!--<div class="aui-arrow-right rzInput" oninput="checkNull(this)" onpropertychange="checkNull(this)"><input type="text"  class="validate"  placeholder="请输入经营范围" id="jingying"></div>-->
        <!--</li>-->


        <li class="aui-list-view-cell">
        <div class="aui-arrow-right rzTitle">注 册 号</div>
        <div class="aui-arrow-right rzInput" ><input type="text" oninput="checkNull(this)" onpropertychange="checkNull(this)"  class="validate"  placeholder="请输入注册号" id="regNo"></div>
        </li>
        <li class="aui-list-view-cell">
        <div class="aui-arrow-right rzTitle">法人代表</div>
        <div class="aui-arrow-right rzInput" ><input oninput="checkNull(this)" onpropertychange="checkNull(this)"  type="text"  class="validate"  placeholder="请输入法人代表姓名" id="bossName"></div>
        </li>


        <!--<li class="aui-list-view-cell">-->
        <!--<div class="aui-arrow-right rzTitle">企业类型</div>-->
        <!--<div class="aui-arrow-right rzInput" oninput="checkNull(this)" onpropertychange="checkNull(this)"><input type="text"  class="validate"  placeholder="请输入企业类型" id="comType"></div>-->
        <!--</li>-->


        <li class="aui-list-view-cell">
        <div class="aui-arrow-right rzTitle">营业期限</div>
        <div class="aui-arrow-right rzInput">
        <!-- 用div防止弹出输入框<input type="text" placeholder="请输入营业期限" id="endTime"> -->
        <div class="time validate" id="endtTime" >请输入营业期限</div>
        </div>
        </li>
        <li class="aui-list-view-cell">
        <div class="aui-arrow-right rzTitle">登记机关</div>
        <div class="aui-arrow-right rzInput"><input type="text"  class="validate"  placeholder="请输入登记机关名称" id="jiguan" oninput="checkNull(this)" onpropertychange="checkNull(this)"></div>
        </li>


        <!--&lt;!&ndash;<li class="aui-list-view-cell">&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="aui-arrow-right rzTitle">营业执照</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="aui-arrow-right rzInput"><input type="text"  class="validate"  placeholder="请输入营业执照" id="yingyezhizaho"></div>&ndash;&gt;-->
        <!--&lt;!&ndash;</li>&ndash;&gt;-->
        <li class="aui-list-view-cell">
            <div class="aui-arrow-right rzTitle" style="float: none;">营业执照</div>
            <ul>
                <li class="aui-list-view-cell pic  validate">
                    <ul class="picList deleUl ulSlidePic" id="image-upload">
                        <!--<li><img src="../../image/tese.jpg"></li>-->
                        <!--<li><img src="../../image/tese.jpg"></li>-->
                        <!--</li>-->
                        <!--<li><img src="../../image/tese.jpg"></li>-->
                    </ul>
                    <div class="picGroup " tapmode data-type="slidePic" onclick="add_pic('image-upload', 3,this)">
                        <div class="picGroupCell">
                            <p><img src="../../image/addPic.png"></p>

                            <p>添加图片</p>

                            <p><em class="picNum">0</em>/3</p>
                        </div>
                    </div>
                </li>
            </ul>
        </li>


    </ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<!-- 时间 -->
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/mui.dtpicker.js"></script>
<script type="text/javascript" src="../../script/mui.picker.js"></script>
<!--  <script type="text/javascript" src="../../script/mui.poppicker.js"></script> -->
<script type="text/javascript">
    var imgUrl, imageNum = 0;
    var imageLen=0,imageSendIndex=0;
    var imgs="";
    apiready = function () {
        api.parseTapmode();
        // getData();

        //重新登录监听
        api.addEventListener({
            name: 'reGetMyInfo'
        }, function (ret) {
            if (ret && ret.value) {
                page = 1;
                getData();
            }
        });
    }

    // 时间选择
    $("#startTime").click(function () {
        // 营业照时间以现在年开始上下十年，减少消耗
        var obj = this;
        var date = new Date();
        var beginYear = date.getFullYear() - 10;
        var endYear = date.getFullYear() + 5;
        var options = '{"type":"date","beginYear":' + beginYear + ',"endYear":' + date.getFullYear() + '}';
        var dtPicker = new mui.DtPicker(JSON.parse(options));
        dtPicker.show(function (selectItems) {
            $("#startTime").text(selectItems);
            $(obj).removeClass("validate");
            checkCanSumbit();
            dtPicker.dispose();
        })
    })
    $("#endtTime").click(function () {
        var obj = this;
        var date = new Date();
        var beginYear = date.getFullYear() - 10;
        var endYear = date.getFullYear() + 5;
        var options = '{"type":"date","beginYear":' + beginYear + ',"endYear":' + endYear + '}';
        var dtPicker = new mui.DtPicker(JSON.parse(options));
        dtPicker.show(function (selectItems) {
            $("#endtTime").text(selectItems);
            $(obj).removeClass("validate");
            checkCanSumbit();
            dtPicker.dispose();
        })
    })
    //检查身份证
    function checkID(obj) {
        var value = $(obj).val().trim();
        if (value != "") {
            if (isCarID(value)) {
                $(obj).removeClass("validate");
            } else {
                if (!$(obj).hasClass("validate")) {
                    $(obj).addClass("validate");
                }
            }
        } else {
            if (!$(obj).hasClass("validate")) {
                $(obj).addClass("validate");
            }
        }
        checkCanSumbit();
    }
    function checkNull(obj) {
        var value = $(obj).val().trim();
        if (value != "") {
            $(obj).removeClass("validate");
        } else {
            if (!$(obj).hasClass("validate")) {
                $(obj).addClass("validate");
            }
        }
        checkCanSumbit();
    }
    function checkCanSumbit() {
        var len = $(".contain").find(".validate").length;
        var msgValue = "";
        if (len > 0) {
            $(".contain").find(".validate").each(function () {
                msgValue = $(this).parents("li").find(".rzTitle").eq(0).text();
                return false;
            })
            api.sendEvent({
                name: 'checkSubmit',
                extra: {
                    msg: msgValue,
                    type: "canNotSumbit"
                }
            });
        } else {
            api.sendEvent({
                name: 'checkSubmit',
                extra: {
                    msg: msgValue,
                    type: "canSumbit"
                }
            });
        }

    }
    //        // 时间选择
    //        $("#endTime").focus(function(e){
    //            // 营业照时间以现在年开始上下十年，减少消耗
    //            e.preventDefault();
    //            var date=new Date();
    //            var beginYear=date.getFullYear()-10;
    //            var endYear=date.getFullYear()+5;
    //            var options='{"type":"date","beginYear":'+beginYear+',"endYear":'+endYear+'}';
    //            var dtPicker2 = new mui.DtPicker(JSON.parse(options));
    //            dtPicker2.show(function (selectItems) {
    //                   $("#endTime").val(selectItems);
    //                    dtPicker2.dispose();
    //               })
    //        })

    //修改头像

    function add_pic(index, max, obj) {
        api.actionSheet({
            title: '请选择图片来源',
            cancelTitle: '取消',
            buttons: ['相册选取', '相机拍摄']
        }, function (ret, err) {
//            判断是单击了那个图片上传
            type = $(obj).attr("data-type");
            var uploadType;
            //判断还可以选择几张图片上传
//            if (max == "6") {
////                表示详情上传
//                max = max - picInfoNum;
//            } else {
////                主图上传
//                max = max - imageNum;
//            }
            max = max - imageNum;
            if (max == 0) {
                api.toast({
                    msg: '图片已超过最多图片！',
                    duration: 1000,
                    location: 'middle'
                });
                return;
            }
            var winWidth = api.winWidth;
            var listHeight = winWidth / 3 - 12;
            if (ret.buttonIndex == 1) {
                if ((/android/gi).test(navigator.appVersion)) {
                    var album = api.require('UIMediaScanner');
                    album.open({
                        column: 3,
                        max: max,
                        sort: {
                            key: 'time',
                            order: 'desc'
                        },
                        texts: {
                            stateText: '*',
                            cancelText: '取消',
                            finishText: '完成'
                        },
                        styles: {
                            bg: '#fff',
                            mark: {
                                icon: '',
                                position: 'bottom_right',
                                size: 20
                            },
                            nav: {
                                bg: '#FF8F00',
                                stateColor: '#ffffff',
                                stateSize: 18,
                                cancleBg: '#FF8F00',
                                cancelColor: '#ffffff',
                                cancelSize: 18,
                                finishBg: '#FF8F00',
                                finishColor: '#ffffff',
                                finishSize: 18
                            }
                        },
                        exchange: true
                    }, function (ret) {
                        if (ret) {
                            var photoList = $api.byId(index);
                            var list = ret.list;
                            api.toast({
                                msg: '正在加载图片',
                                duration: 1000,
                                location: 'middle'
                            });
                            for (var i in list) {
                                var item = list[i];

                                var imgDom = $api.dom('#' + index + ' .pics[src="' + item.path + '"]');
//                                var imgDom = $api.dom('.pics[src="' + item.path + '"]');
                                if (!imgDom) {
                                    $api.prepend(photoList, '<li><span class="deleIcon" data-imageId="image' + imageNum + '" tapmode onclick="delePic(this)"></span><img class="pics" src="' + item.path + '"></li>');
                                    api.parseTapmode();
                                    $(obj).parent().removeClass("validate");
                                    checkCanSumbit();
                                } else {
                                    api.toast({
                                        msg: "图片已存在"
                                    })
                                }


                                imageNum++;
                                uploadNum();
                            }

                        }
                    });
                } else {
                    //苹果相册
                    api.getPicture({
                        sourceType: 'album',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: false,
                        quality: 60,
                        targetWidth: 300,
                        saveToPhotoAlbum: true
                    }, function (ret, err) {
                        var photoList = $api.byId(index);
                        if (ret.data) {
                            $api.prepend(photoList, '<li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="' + ret.data + '"><input type="hidden" id="images0" value=""></li>');
                            api.parseTapmode();

                            imageNum++;
                            uploadNum();
                            $(obj).parent("li.pic").removeClass("validate");
                            checkCanSumbit();
                        }
                    });
                }

            } else if (ret.buttonIndex == 2) {
                api.getPicture({
                    sourceType: 'camera',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    allowEdit: false,
                    quality: 60,
                    targetWidth: 300,
                    saveToPhotoAlbum: true
                }, function (ret, err) {
                    var photoList = $api.byId(index);
                    if (ret.data) {
                        $api.prepend(photoList, '<li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="' + ret.data + '"><input type="hidden" id="images0" value=""></li>');
                        api.parseTapmode();
                        imageNum++;
                        uploadNum();
                        $(obj).parent("li.pic").removeClass("validate");
                        checkCanSumbit();
                        //uploadImage(ret.data)发布再上传
                    } else {
                        api.toast({
                            msg: "拍照操作失败，请重新操作",
                            location: 'middle'
                        })
                    }
                });
            }
        });
    }

    // 删除选择的图片
    function delePic(obj) {
        var imageId = $(obj).attr('data-imageId');
        var isInfo = $(obj).parent().parent().hasClass("ulInfoPic");//单击的删除的按个部分的
        imageNum--;
        if (imageNum == 0) {
            if (!$(obj).parents("li.pic").hasClass("validate")) {
                $(obj).parents("li.pic").addClass("validate");
            }

        }
        checkCanSumbit();
        uploadNum()
        $(obj).parent().remove();
    }
    //更新添加图片下面的数字
    function uploadNum() {
        $(".picNum").text(imageNum);
    }
    function sendData() {
        var data = {};
        data['user_id'] = $("#companyName").val();//公司名
        data['user_id'] = $("#startTime").text();//请输入成立日期
        data['user_id'] = $("#regNo").val();//请输入注册号
        data['user_id'] = $("#bossName").val();//请输入法人代表姓名
        data['user_id'] = $("#endtTime").val();//请输入营业期限
        data['user_id'] = $("#jiguan").val();//请输入登记机关名称
        var imgArray=toArray(imgs);
        for(var i=0 ;i<imgArray.length;i++){
            alert(imgArray[i])
        }
        var url = 'Mall/imageUpload';
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {
                $(".picGroup").removeClass("validate");
                checkCanSumbit();
                imgUrl = ret.msg;
                $(".picGroupCell").html('<img src="' + ret.msg + '" />')
                hideLoading();
            } else {
                if (!$(".picGroup").hasClass("validate")) {
                    $(".picGroup").addClass("validate");
                }
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }
    function submit() {
        showLoading();

        api.execScript({
            name:"my/renzheng_win",
            script:"btnNotUnbind()"
        })

        imageLen=$(".picList").find("img").length;
        $(".picList").find("img").each(function (index) {
            //先一张一张循环上传主图，上传完主图在上传详情图
            uploadImage($(this).attr("src"), index);
        })
    }

    // 上传图片
    /**
     *
     * @param imgPath  图片的本地地址
     * @param index 标记下标上传服务器
     */
    function uploadImage(imgPath, index) {
        var img = new Image();
        img.src = imgPath;
        //图片路径
        img.onload = function () {
            //生成比例
            var w = this.width, h = this.height, scale = w / h;
            w = 640 || w;
            h = w / scale;
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            $api.attr(canvas, 'width', '' + w + '');
            $api.attr(canvas, 'height', '' + h + '');
            ctx.drawImage(this, 0, 0, w, h);
            var base64 = canvas.toDataURL('image/jpeg');
            getStorageAll();
            //上传图片
            var upData = {
                userName: user_name,
                base64: base64,
            }
            var url = 'Mall/imageUpload';
            ajaxRequest(url, 'post', upData, function (ret, err) {
//                alert(imageNum);
                if (ret.status == 1) {
                    imageSendIndex++;
                    imgs+=ret.msg+",";
                    if(imageSendIndex==imageLen){
                        sendData();
                    }

                    return ret.msg

                } else {
                    //$api.remove($api.dom('.li_pics[data-src="' + imgPath + '"]'));
                    api.toast({
                        msg:"上传图片出错"
                    })
                }
            })
        }
    }
</script>
</html>